有了父子層的概念後，還可以怎麼運用元件呢?

props傳遞資料

接續昨天的範例，這樣的模組化除了可以單純渲染畫面外，也可以重複使用且更換內容物

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>;
}
function App() {
  return <>
		<Welcome name="Amy"/>
		<Welcome name="Bob"/>
	</>;
}

父層傳遞資料(名字)給子元件，這個動作更為props

在App元件中引入子元件並賦予一個name參數，這個參數會進入Welcome子元件props中

props.name="Amy"

原理可知我們也可以用物件解構的方式撰寫Welcome子元件

function Welcome({name}) {
  return <p>Hello, {name}!</p> 
};

處理陣列資料

當有陣列資料要傳入元件時，我們可以使用map功能將資料一筆筆渲染到畫面上，如以下程式碼

function List({ data }) {
  return <li> {data} </li>};

const ListNumbers = [1, 2, 3, 4, 5];
ListNumbers.map((number) =>
  <List data={number} />);

可以將 ListNumbers 這個陣列一一傳到 List 元件，並顯示資料。

這種功能比較常見的就是使用在li這樣的條列上，或是像產品列表那樣的形式也可以這樣使用，內容物可能就會不只數字，還會有產品名稱、價錢...等的項目會需要渲染出來。